<template>
  <div> 
    <meta-header :metaInfo="{ title: '角色管理' }"></meta-header>
    <div class="head">
      <n-button v-if="!isModalComponent" type="info" @click="showAdd()"> 添加 </n-button>
      <n-button v-if="!isModalComponent" type="info" @click="clearTree()"
        :disabled="permissionTreeRefreshing"> 刷新权限树 </n-button>
      <label v-if="!isModalComponent">
        <n-input v-model:value="search.name" @keydown.enter="searchData()" clearable />
        <n-button type="info" @click="searchData()" > 搜索 </n-button>
      </label>
    </div>

    <n-space class="table-data-space" vertical>
      <n-spin :show="tableLoading">
      <n-table striped :single-line="false">
        <thead>
          <tr>
            <th>
              <n-checkbox v-model:checked="tableAll" :indeterminate="tableIndeterminate"
                  @click.stop="toggleCkeckAll()" />
            </th>
            <th>名称</th>
            <th>角色代码</th>
            <th v-if="!isModalComponent">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row,index in datas" :key="index">
            <td><n-checkbox v-model:checked="tableCheckList[index]" /></td>
            <td> {{row.name}} </td>
            <td> {{row.roleCode}} </td>
            <td v-if="!isModalComponent"> 
              <n-button strong secondary type="info"  @click="editRolePermissions(row)" size="small">权限</n-button>
              <n-button strong secondary type="info"  @click="showEdit(row)" size="small">编辑</n-button>
              <n-button strong secondary type="info"  @click="refreshRolePermission(row)" 
                :disabled="rolePermissionRefreshing" size="small">刷新权限</n-button>
              <n-button strong secondary type="error" @click="deleteVo(row)" size="small">删除</n-button>  
            </td>
          </tr>
        </tbody>
      </n-table>

      <n-pagination
        v-if="tablePage.total > tablePage.size"
        v-model:page="tablePage.page"
        v-model:page-size="tablePage.size"
        :item-count="tablePage.total"

        :mask-closable="false"
        :show-size-picker="!isModalComponent"
        :page-slot="5"
        :page-sizes="pageSizeOption"
        :on-update:page="pageChange"
        :on-update:page-size="pageSizeChange"
      />
      </n-spin>
    </n-space>

    <n-modal v-model:show="showModal" preset="dialog" :mask-closable="false">
          <template #header>
            <div> {{isEdit ? '编辑' : '添加' }} </div>
          </template>
          <div>
              <n-form ref="dialogForm" :model="dialogForm" :rules="rules">
                  <n-form-item path="name" label="角色名称">
                    <n-input type="text"  v-model:value="dialogForm.name" placeholder="请输入名称" />
                  </n-form-item>
                  <n-form-item path="roleCode" label="角色代码">
                    <n-input type="text"  v-model:value="dialogForm.roleCode" placeholder="唯一代码" :disabled="isEdit"/>
                  </n-form-item>
              </n-form>
              
          </div>
          <template #action>
            <n-button type="primary" v-if="!isEdit" @click="saveVo()" :disabled="dialogFormSaving"> 添加 </n-button>
            <n-button type="primary" v-else @click="updateVo()" :disabled="dialogFormSaving"> 更新 </n-button>
            <n-button type="warning" @click="close()" :disabled="dialogFormSaving"> 取消 </n-button>
          </template>
    </n-modal>
    
    <n-modal v-model:show="permissionDialog.visible" preset="dialog" :mask-closable="false">
          <template #header>
            <div> 角色权限 </div>
          </template>
          <div style="height:100px">
            <n-tree-select :options="permissionDialog.permissionTreeOption"
              multiple checkable cascade :check-strategy="'parent'" :default-value="permissionDialog.oldPermissions"
              @update:value="handleUpdatePermission"
            />
          </div>
          <template #action>
            <n-button type="primary" @click="saveRolePermission()" :disabled="permissionDialog.saving"> 保存 </n-button>
            <n-button type="warning" @click="closeRolePermission()" :disabled="permissionDialog.saving"> 取消 </n-button>
          </template>
    </n-modal>

  </div>
</template>

<script src="./role.js">
</script>

<style lang="scss" scoped>
@import '/src/assets/css/manage.scss';
</style>